<template>
  <div class="card">
    <el-card v-for="(item, index) in list" :index="item.index" :key="item.id" shadow="hover">
      <template #header>
        <el-row>
          <el-col :span="18">
            <span><strong>id: </strong>{{item.id}}</span>

            <el-button v-if="authorization() === 1" style="margin-left: 10px"
                       type="primary" icon="el-icon-check" circle size="mini" @click="approval(item.id)"></el-button>
            <el-button v-if="authorization() === 1"
                       type="danger" icon="el-icon-close" circle size="mini" @click="deny(item.id)"></el-button>
            <span style="margin-left: 10px">
              <el-tag v-if="type === 2" effect="dark" type='success'>审核通过</el-tag>
              <el-tag v-if="type === 3" effect="dark" type='danger'>审核未通过</el-tag>
            </span>
          </el-col>

        </el-row>
      </template>
      <div>
        <el-row>
          <el-col :span="3">
            <span><strong>操作员: </strong>{{item.operator}}</span>
          </el-col>
          <el-col :span="5">
            <span><strong>银行账户: </strong>{{item.account}}</span>
          </el-col>
          <el-col :span="6">
            <span><strong>总额合计: </strong>{{item.totalAmount}}(元)</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="24">
            <span><strong>备注: </strong>{{item.remark}}</span>
          </el-col>
        </el-row>
      </div>

    </el-card>
  </div>
</template>

<script>
import {PayApproval} from "@/network/finance";

export default {
  name: "PayList",
  props: {
    list: Array,
    type: Number,
  },
  data() {
    return {
      showAll: [],
    }
  },
  mounted() {
    this.showAll = new Array(this.list.length).fill(false)
  },

  methods: {
    changeState(index) {
      this.$set(this.showAll, index, !this.showAll[index])
    },
    authorization() {
      if (this.type === 1 && sessionStorage.getItem('role') === 'GM') {
        return 1
      }
    },
    approval(id) {
      let config = {
        params: {
          paySheetId: id,
          state: 'SUCCESS'
        }
      }
      console.log("11111111111")
      if (this.type === 1) {
        PayApproval(config).then(res => {
          console.log("3333333")
          this.$emit("refresh")
          this.$message({
            message: '操作成功111!',
            type: 'success'
          })
        })
      }
    },
    deny(id) {
      let config = {
        params: {
          paySheetId: id,
          state: 'FAILURE'
        }
      }
      console.log("222222222222")
      if (this.type === 1) {
        PayApproval(config).then(res => {
          this.$emit("refresh")
          this.$message({
            message: '操作成功222!',
            type: 'success'
          })
        })
      }
    }
  }

}

</script>

<style lang="scss" scoped>
.card {
  width: 80%;
  margin: 0 auto;
  .button {
    float: right;
    padding: 3px 0
  }
}
.el-card {
  margin-bottom: 20px;
  background: #EEF7F2;
}
</style>